/* button.scss */
@charset "UTF-8";
@import "common/var";
@import "mixins/mixins";

@include b(button) {
  font-size: 14px;
  color: #333;
  background-color: #fff;
  border-width: 1px;
  border-radius: 4px;
  outline: none;
  border: 1px solid transparent;
  padding: 10px 20px;
  cursor: pointer;
  
  &:active,
  &:focus {
    outline: none;
  }

  &-default {
    color: #333;
    border-color: #555;

    &:active,
    &:focus,
    &:hover {
      background-color: rgba($--color-primary, 0.3);
    }
  }
  &-primary {
    color: #fff;
    background-color: $--color-primary;

    &:active,
    &:focus,
    &:hover {
      background-color: mix($--color-primary, #ccc);
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: mix($--color-white, $--color-primary, 40%);
        background-color: mix($--color-white, $--color-primary, 90%);
        border-color: mix($--color-white, $--color-primary, 80%);
      }
    }
  }

  &-info {
    color: #fff;
    background-color: $--color-info;

    &:active,
    &:focus,
    &:hover {
      background-color: mix($--color-info, #ccc);
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: mix($--color-white, $--color-info, 40%);
        background-color: mix($--color-white, $--color-info, 90%);
        border-color: mix($--color-white, $--color-info, 80%);
      }
    }
  }
  &-success {
    color: #fff;
    background-color: $--color-success;

    &:active,
    &:focus,
    &:hover {
      background-color: mix($--color-success, #ccc);
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: mix($--color-white, $--color-success, 40%);
        background-color: mix($--color-white, $--color-success, 90%);
        border-color: mix($--color-white, $--color-success, 80%);
      }
    }
  }
  &-warning {
    color: #fff;
    background-color: $--color-warning;

    &:active,
    &:focus,
    &:hover {
      background-color: mix($--color-warning, #ccc);
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: mix($--color-white, $--color-warning, 40%);
        background-color: mix($--color-white, $--color-warning, 90%);
        border-color: mix($--color-white, $--color-warning, 80%);
      }
    }
  }
  &-danger {
    color: #fff;
    background-color: $--color-danger;

    &:active,
    &:focus,
    &:hover {
      background-color: mix($--color-danger, #ccc);
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: mix($--color-white, $--color-danger, 40%);
        background-color: mix($--color-white, $--color-danger, 90%);
        border-color: mix($--color-white, $--color-danger, 80%);
      }
    }
  }
  &.is-round {
    border-radius: 20px;
  }
  &.is-circle{
    border-radius: 50%;
    padding: 12px;
    i{
      width: 16px;
      height: 14px;
    }
  }
  &.is-disabled {
    cursor: not-allowed;
  }
  &-medium{
    padding: 8px 20px;
  }
  &-small{
    padding: 7px 15px;
  }
  &-mini{
    padding: 6px 15px;
  }
}
